-
Notifications
You must be signed in to change notification settings - Fork 72
feat(helper): add transition helpers with components and styles #413
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Maybe you should fix the linter? |
Pull Request Test Coverage Report for Build 14130316687Details
💛 - Coveralls |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR adds new transition helper components and corresponding styles to facilitate fade-in and expand animations for block-level elements.
- Adds a new export for transition components in the client components index.
- Introduces the FadeInExpandTransition component with support for both height and width transitions.
- Updates documentation in both Chinese and English to include usage guidelines for the new transitions.
Reviewed Changes
Copilot reviewed 8 out of 21 changed files in this pull request and generated no comments.
Show a summary per file
File | Description |
---|---|
tools/helper/src/client/components/index.ts | Exports the new Transitions components to integrate into the helper module |
tools/helper/src/client/components/Transitions/index.ts | Provides an index file that re-exports transition components |
tools/helper/src/client/components/Transitions/FadeInExpandTransition.ts | Implements the FadeInExpandTransition component with transition logic |
docs/zh/tools/helper/style.md | Documents the new transition styles in the Chinese docs |
docs/zh/tools/helper/client.md | Adds usage details for FadeInExpandTransition in the Chinese client docs |
docs/tools/helper/style.md | Updates the English documentation for transition styles |
docs/tools/helper/client.md | Updates the English client docs with details on FadeInExpandTransition |
Files not reviewed (13)
- tools/helper/package.json: Language not supported
- tools/helper/src/client/styles/transition/fade-in-down.scss: Language not supported
- tools/helper/src/client/styles/transition/fade-in-height-expand.scss: Language not supported
- tools/helper/src/client/styles/transition/fade-in-left.scss: Language not supported
- tools/helper/src/client/styles/transition/fade-in-right.scss: Language not supported
- tools/helper/src/client/styles/transition/fade-in-scale-up.scss: Language not supported
- tools/helper/src/client/styles/transition/fade-in-up.scss: Language not supported
- tools/helper/src/client/styles/transition/fade-in-width-expand.scss: Language not supported
- tools/helper/src/client/styles/transition/fade-in.scss: Language not supported
- tools/helper/src/client/styles/transition/slide-in-down.scss: Language not supported
- tools/helper/src/client/styles/transition/slide-in-left.scss: Language not supported
- tools/helper/src/client/styles/transition/slide-in-right.scss: Language not supported
- tools/helper/src/client/styles/transition/slide-in-up.scss: Language not supported
Comments suppressed due to low confidence (2)
tools/helper/src/client/components/Transitions/index.ts:1
- The export statement uses a '.js' extension for FadeInExpandTransition, but the source file is a TypeScript file (.ts); confirm that your build configuration handles this conversion correctly or adjust the extension if needed.
export * from './FadeInExpandTransition.js'
tools/helper/src/client/components/Transitions/FadeInExpandTransition.ts:57
- [nitpick] In the height transition branch, the reflow is forced using 'el.offsetWidth' even though it might be clearer to use 'el.offsetHeight' for consistency with the affected dimension; please verify if this is intentional.
void el.offsetWidth
Before submitting the PR, please make sure you do the following
close #123
).What is the purpose of this pull request?
Description
Screenshots
Before
After